<template>
  <div>
<img src="@/assets/road.jpeg" width="100%" height="970px"/>
  <div class="dialog">
    <div class="loginPage">
      <h1 style="red">登录</h1>
      <el-form>
        <el-form-item label="用户名">
          <el-input type="text" id="user" v-model="formName.user" @blur="inputBlur('user',formName.user)"></el-input>
          <p>{{formName.userError}}</p>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" id="password" v-model="formName.password" @blur="inputBlur('password',formName.password)"></el-input>
          <p>{{formName.passwordError}}</p>
        </el-form-item>
        <el-checkbox id="rememberMe" v-model="checked">记住我</el-checkbox>
        <el-button type="primary" @click="submitForm('formName')" v-bind:disabled="formName.beDisabled">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form>
    </div>
  </div>

</div>
</template>

<script>
import { requestLogin } from '../../../axios/api'
// 和其他组件一样，一并引入
import { Message } from 'element-ui'
export default {
  name:'login',
  data () {
    return {
      formName: {//表单中的参数
        user: '',
        userError: '',
        password: '',
        passwordError: '',
        beDisabled: true,

      },
      checked:false,
      beShow: false//传值给父组件
    }
  },
  methods: {
    resetForm:function(){
      this.formName.user = '';
      this.formName.userError = '';
      this.formName.password = '';
      this.formName.passwordError = '';
    },
    submitForm:function(formName){
      //与父组件通信传值
      //this.$emit('showState', [this.beShow,this.formName.user])
      //提交user password
      let loginParams = {
        user:this.formName.user,
        password:this.formName.password,
        rememberMe:this.checked
      };
      requestLogin(loginParams).then(res => {
        let { status, message, resData} = res
        console.log(resData);
        if(resData && status != 200){
          this.$message({
            message : message,
            type:'error'
          });

          $('#password').val('');
          return;
        } else {
          if(!window.localStorage){ //一种持久化存储信息  只接受字符串
            console.log("浏览器不支持localstorage");
          }else{
            var storage=window.localStorage;
            var d=JSON.stringify(resData);
            storage.setItem("user",d);
            console.log("storage.user:" + storage.user);
          }
          this.$message({
            message : message,
            type:'success'
          });
          setTimeout(() => {//箭头函数可以穿透上下文
            //登录返回
            this.$router.push({ path : '/homegu' });
          },200);

        }
      }
    )
    .catch(function(reason,err){
      alert("catch中的 error，登录失败");
      console.log(reason);
    })
  },
  inputBlur:function(errorItem,inputContent){
    if (errorItem === 'user') {
      if (inputContent === '') {
        this.formName.userError = '用户名不能为空'
      }else{
        this.formName.userError = '';
      }
    }else if(errorItem === 'password') {
      if (inputContent === '') {
        this.formName.passwordError = '密码不能为空'
      }else{
        this.formName.passwordError = '';
      }
    }
    //对于按钮的状态进行修改
    if (this.formName.user != '' && this.formName.password != '') {
      this.formName.beDisabled = false;
    }else{
      this.formName.beDisabled = true;
    }
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,body{
  margin: 0;
  padding: 0;
  position: relative;
}
.dialog{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
}
.loginPage{
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -150px;
  margin-left: -175px;
  width: 350px;
  min-height: 300px;
  padding: 30px 20px 20px;
  border-radius: 8px;
  box-sizing: border-box;

}
.loginPage p{
  color: red;
  text-align: left;
}

</style>
